<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
  <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
</head>
<style>
  #map {
  width: 100%;
  height: 98vh;
}
.ol-zoomslider {
  top: 7.5em;
}
</style>
<body>
  <div id="map" class="map">
  </div>
  <script>
    const gaodeMapLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url:'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
    })
});
    const map = new ol.Map({
        target:'map',
        layers: [gaodeMapLayer],
        view: new ol.View({
        projection: "EPSG:4326",

            center: [116.404, 39.915],
            zoom: 9
        })
    });
    //设置矢量图形
    //绘图步骤
    // 1.通过几何信息和样式信息构建要素
    // 2.将要素添加到矢量数据源
    // 3.将矢量数据源添加到矢量图层
    // 4.将矢量图层添加到地图容器
//1.通过样式信息和几何信息构建点要素
const point =new ol.Feature({
  geometry: new ol.geom.Point([116.404, 39.115]),
  name: '北京'
})
let style=new ol.style.Style({
  //image属性设置点要素的样式
  image: new ol.style.Circle({
    radius:10,//半径,单位degree
    fill: new ol.style.Fill({
      color: 'skyblue'
    }),
    stroke: new ol.style.Stroke({
      color: 'red',
      width: 3
    })
  })
})
point.setStyle(style)
//2.将要素添加到矢量数据源
let source = new ol.source.Vector({
  features: [point]
})
//3.将矢量数据源添加到矢量图层
let layer = new ol.layer.Vector({
  source: source
})
//4.将矢量图层添加到地图容器
map.addLayer(layer)
//构建矢量数据源
const vectorSource = new ol.source.Vector({
  features: [point]
})
//构建矢量图层
const vectorLayer = new ol.layer.Vector({
  source: vectorSource
})
//将矢量图层添加到地图容器
map.addLayer(vectorLayer)

    // 地图控件------------------------------------------------
     //视图跳转控件
    const zoomToExtent=new ol.control.ZoomToExtent({ extent: [110, 30, 160, 30] });
    map.addControl(zoomToExtent);
    //缩放控件
    const zoomSlider = new ol.control.ZoomSlider();
    map.addControl(zoomSlider);
    //全屏控件
    const fullScreenControl = new ol.control.FullScreen();
    map.addControl(fullScreenControl);
    //比例尺控件
    const scaleLineControl = new ol.control.ScaleLine();
    map.addControl(scaleLineControl);
  </script>
</body>
</html>